﻿@section header
{
    <link href="~/Themes/RongJi/Style/base/css/account.css" rel="stylesheet">
}
@section title
{
    通过手机找回密码
}
<div id="equalize">
    <div class="col-right">
        <div class="wrapper-right">
            <dl class="section">
                <dd class="sectionC">
                    <form action="~/Customer/FindPasswordByPhone" id="findPasswordByPhoneForm" method="post">
                        <div class="item">
                            <label>手机号：</label>
                            <input type="text" id="CellPhone" name="CellPhone" value="@Model.CellPhone" class="cmnTInput" placeholder="@(Model.UserInfo.CellPhone.Substring(0, 3) + "-----" + Model.UserInfo.CellPhone.Substring(Model.UserInfo.CellPhone.Length - 3, 3))" />
                            <span class="require">*</span>
                        </div>
                        <div class="item">
                            <label>验证码：</label>
                            <input type="text" id="VerifyCode" name="VerifyCode" class="cmnTInput" placeholder="请输入正确的验证码" />
                            <span class="require">*</span>
                            <input type="button" class="form-control btn-success" id="getCode" value="获取验证码">
                        </div>
                          @if (Model.Message != null)
                        {
                             <div class="item">
                                  <label></label>
                                 <div class="error">@Model.Message</div>
                             </div>
                        }
                        <div class="btnGroup">
                            <input name="UserName" id="UserName" type="hidden" value="@Model.UserInfo.UserName" />
                            <input name="ActionType" id="ActionType" type="hidden" value="@Model.ActionType" />
                            <input type="submit" value="下一步" class="rjbtn rjbtnGreen">
                        </div>
                    </form>
                </dd>
            </dl>
        </div>
    </div>
</div>
@section footer
{
    <script type="text/javascript">
        $(function () {
            var isCodeSended = false;
            var timeOut = 60;

            //发送验证码
            $("#getCode").click(function () {
                if (isCodeSended) {
                    return;
                }
                if (!$("#CellPhone").val()) {
                    KevinShop.MessageBox.Alert("请输入手机号!");
                    return;
                }
                isCodeSended = true;

                var postdata = "{'userName':'" + $("#UserName").val() + "','cellPhone':'" + $("#CellPhone").val() + "'}"
                KevinShop.Common.Ajax.Post("SendSMSValdateCode", postdata, function (data) {
                    if (data) {
                        isCodeSended = false;
                        KevinShop.MessageBox.Alert(data);
                    }
                    else {
                        updateTime(timeOut);
                        KevinShop.MessageBox.Alert("发送成功！");
                    }
                });
            });

            function updateTime(timeout) {
                $("#getCode").val('获取(' + timeout + ')');
                setTimeout(function () {
                    if (timeout > 0) {
                        updateTime(timeout - 1);
                    }
                    else {
                        isCodeSended = false;
                    }
                }, 1000);
            }
            
            //通过手机找回密码表单验证
            $("#findPasswordByPhoneForm").validate({
                rules: {
                    CellPhone: {
                        required: true,
                        isMobile:true
                    },
                    VerifyCode: {
                        required: true
                    }
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        });
    </script>
}
